<template>
  <view class="box">
    <view class="box-x" :class="{'szcolor':indexs==1}" @click="getqh(1)">
      <image src="../../static/img/sy.png" mode="" v-if="indexs != 1"></image>
      <image src="../../static/img/syx.png" mode="" v-if="indexs == 1"></image>
      <view class="">首页</view>
    </view>
    <!-- 	<view class="box-x" :class="{'szcolor':indexs==2}" @click="getqh(2)">
			<image src="../../static/img/gy.png" mode="" v-if="indexs != 2"></image>
			<image src="../../static/img/gyx.png" mode="" v-if="indexs == 2"></image>
			<view class="">公益项目</view>
		</view> -->
    <view class="box-x" :class="{'szcolor':indexs==3}" @click="getqh(3)">
      <image src="../../static/img/x.png" mode="" v-if="indexs != 3"></image>
      <image src="../../static/img/xx.png" mode="" v-if="indexs == 3"></image>
      <view class="">商品分类</view>
    </view>
    <view class="box-x" :class="{'szcolor':indexs==4}" @click="getqh(4)">
      <image src="../../static/img/my.png" mode="" v-if="indexs != 4"></image>
      <image src="../../static/img/myx.png" mode="" v-if="indexs == 4"></image>
      <view class="">个人中心</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        indexs: 1,
      }
    },
    methods: {
      getqh(num) {

        console.log(num);
        if (num == 1) {
          uni.navigateTo({
            url: "/pages/index/index?id=" + num
          })

        }
        // if (num == 2) {
        //   uni.navigateTo({
        //     url: "/pages/welfare/welfare?id=" + num
        //   })

        // }
        if (num == 3) {
          uni.navigateTo({
            url: "/pages/message/message?id=" + num
          })
        }
        if (num == 4) {
          uni.navigateTo({
            url: "/pages/my/my?id=" + num
          })
        }
        // this.indexs = num

      }
    }

  }
</script>

<style scoped>
  .box {
    width: 100%;
    height: 100rpx;
    background: #FFFFFF;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  image {
    width: 40rpx;
    height: 40rpx;
  }

  .box-x {
    box-sizing: border-box;
    overflow: hidden;
    height: 100%;
    width: 25%;
    font-size: 24rpx;
    text-align: center;
    font-weight: 400;
    color: #999999;
    line-height: 24rpx;
  }

  .szcolor {
    color: #0DC06E;
  }
</style>